@extends('layouts/app')
 {{--服务员加菜页面--}}
@section('content')
    @csrf
    <div class="food-menu">
        <div class="small-banner">
            <img src="/img/rec-banner.png" alt="" class="img-responsive">
        </div>
        <div class="shops-info white-bg">
            <div class="img">
                <img src="/img/eat.png" alt="" class="img-responsive">
            </div>
            <div class="text">
                <div class="title f30 gary3"></div>
                <div class="summary f20 gary9">
                    {{--<span>当前房间：大厅</span>--}}
                    {{--<span class="ml-10">当前桌号：20</span>--}}
                    <span class="table-info"></span>
                </div>
            </div>
        </div>
        {{--<div class="notice">公告：我是扫码点餐页面</div>--}}
        <div class="row">
            <div class="col-3">
                <ul class="food-category nav-tabs">

                </ul>
            </div>
            <div class="col-9">
                <div class="tab-content">

                </div>
            </div>
        </div>
        <div class="menu-shopping-car">
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="show-add row">
                        <div class="col-3">
                            <div class="car">
                                <svg class="icon f72 white" aria-hidden="true">
                                    <use xlink:href="#icon-tubiao-9"></use>
                                </svg>
                                <span class="weui-badge" style="position: absolute;">0</span>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="info">
                                <p class="show-car f30">￥<span class="total">0</span> <span class="f14 send"></span></p>
                                <p class="show-car f20">
                                    <span class="gary9 spend"></span>
                                    {{--<span class="gary9">打包费<span class="pack">3</span></span>--}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <p class="text-center check-btn f30">
                        确认下单
                    </p>
                </div>
            </div>
        </div>
        <div id="myFoods" class="weui-popup__container popup-bottom">
            <div class="weui-popup__overlay"></div>
            <div class="weui-popup__modal" style="padding-bottom: 53px;">
                <div class="toolbar">
                    <div class="toolbar-inner">
                        <a href="javascript:;" class="picker-button close-popup">关闭</a>
                        <h1 class="title">标题</h1>
                    </div>
                </div>
                <div class="modal-content">
                    <div class="weui-cells" id="myFoodsList">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var _token = $("input[name='_token']").val(),
            id = getRequest().sid, // 桌子ID
            sid = '',  // 店铺id
            shopsName = '', // 店铺名称
            tableName = ''; // 桌子或包间名称




        // 进来先看看购物车有没有东西
        shopCar("first");

        // 点击input 输入数量也会触发购物车
        $("body").on("input", "input[name='number']", function () {
            var num = $(this).val();
            // 如果用户输入负值，变为1
            if (num < 0) {
                num = 1;
                $(this).val(num);
            }

            // 如果用户有输入，才触发购物车事件，防止用户在删除表单值重新输入时，清空数据
            if (num) {
                console.log("还进来吗");
                var par = $(this).parent(".weui-count");
                // 拿到菜的信息
                var food = $(par).attr("data-text");
                food = JSON.parse(food);

                // 确定店铺的ID
                var shopsId = food.shop_id,
                    otherInput = $(".input" + food.id); // 列表上对应的input
                var type = 'add';
                if (food.attribute) {
                    type = 'addMore'
                }

                otherInput.val(num);
                food['num'] = num;

                // 发布信息给购物车
                Observer.fire("addShops", {
                    shopsId: shopsId,
                    type: type,
                    data: food
                });
                console.log("food", food);
            }
        });



        // 获取商家菜单数据
        function getShopsMenus () {
            $.post("/api/scanDeskRoom", {id: id}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                var shopsMenus = res;
                if (shopsMenus.data.shopmenu.length > 0) {
                    // 拿到菜单的同时,先拿到第一个分类菜去渲染
                    var cid = shopsMenus.data.shopmenu[0].id; // 分类id
                        sid = shopsMenus.data.id; // 店铺id

                    getFoods(cid, sid);

                    var data = [];

                    // 设置数据渲染模板类型
                    data['type'] = 'shopsMenu';

                    // 当前页面承载模板的容器
                    data['element'] = '.food-menu';

                    // 店铺ID
                    data['id'] = sid;

                    // 店铺名称
                    data['name'] = shopsMenus.data.shop_name;

                    // 显示店铺名称
                    $(".shops-info .title").text(data['name']);

                    // 显示桌子号
                    if (shopsMenus.data.nowdeskroom.type == 0) {
                        $(".table-info").text("当前桌子：" + shopsMenus.data.nowdeskroom.name);
                        tableName = "当前桌子：" + shopsMenus.data.nowdeskroom.name;
                    } else if (shopsMenus.data.nowdeskroom.type == 2) {
                        $(".table-info").text("当前包间：" + shopsMenus.data.nowdeskroom.name);
                        tableName = "当前包间：" + shopsMenus.data.nowdeskroom.name;
                    }


                    data['data'] = shopsMenus.data.shopmenu;

                    // 开始渲染数据
                    A.init(data);
                }
            });
        }
        getShopsMenus();

        // 获取菜单对应的菜菜
        function getFoods(cid, id) {
            $.get("/api/getIdshopdish", {id: cid}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                var foodsData = res;
                // 设置数据渲染模板类型
                foodsData['type'] = 'shopsList';

                // 当前页面承载模板的容器
                foodsData['element'] = '#'+ cid;

                // 根据店铺ID去拿到购物车数据，
                var carData = getShopsCarData(id);
                if (carData && carData.length > 0) {
                    showCarBadge(id);
                    // 如果有加到购物车，需要重构数据
                    foodsData.data = refacData(carData, foodsData.data);
                }

                console.log("foodsData", foodsData);
                // 开始渲染数据
                A.init(foodsData);
            });
        }

        // 把购物车的数据加到菜菜
        function refacData (carData, foodsData) {
            for (var i = 0, len = foodsData.length; i < len; i++) {
                for (var j = 0, jlen = carData.length; j < jlen; j++) {
                    if (carData[j].id == foodsData[i].id) {
                        foodsData[i]['car'] = carData[j];
                    }
                }
            }
            return foodsData;
        }


        // 菜单分类点击获取对应菜菜
        $(".food-category").on("click", "a", function () {
            // 拿到分类ID
            var cid = $(this).attr("data-cid");
            // 拿到店铺ID
            var sid = $(this).attr("data-sid");
            // 菜单显示
            $("#" + cid).addClass("active").siblings().removeClass("active");
            // 获取菜单对应的菜菜
            getFoods(cid, sid);
        });

        // 显示购物车已经点的菜
        $(".show-add").click(function () {
            var shopsId = $(".tab-pane").attr("data-id");
            var food = getShopsCarData(shopsId);

            if (food && food.length > 0) {
                // 如果有缓存这个数据,就显示
                showMyFoods({shopsId: shopsId});
                // 如果已经打开，再点一次就关闭
                if ($("#myFoods").hasClass("weui-popup__container--visible")) {
                    $.closePopup();
                } else {
                    // 显示列表面板
                    $("#myFoods").popup();
                }
               
            }

        });

        // 去到下单页面
        $(".check-btn").click(function () {
            var shopsName = $(".tab-pane").attr("data-name"),
                shopsSpend = $(".tab-pane").attr("data-spend");

            console.log('shopsSpend',shopsSpend );

            var num = $('.weui-badge').text();
            if (num < 1) {
                return;
            }
            location.href="/mobile/takeout-order?shopsId=" + sid +"&shopsName=" + shopsName + "&type=sweep" + "&room_desk_id=" + tableName;
        });
    </script>
@endsection

@extends('layouts/footer')
